<template>
  <div class="info">
    <div class="time">{{ new Date().toLocaleDateString() }}</div>
    <div class="bg_ticket">
      <img v-if="temp.is_use===0" src="@/assets/un_use.png" alt class="use-bg">
      <img v-else src="@/assets/use.png" alt class="use-bg">
      <div class="cont">
        <div class="rank">{{ temp.prize_level }}等奖</div>
        <div>
          <div class="name">{{ temp.prize }}</div>
          <div class="id">NO.{{ temp.prize_num }}</div>
        </div>
        <div class="btn" @click="useAlertHandler" />
      </div>
    </div>
    <div class="rule">
      <div>·请勿自己点击[使用]，否则奖券作废；</div>
      <div v-html="temp.rule" />
      <div>·有效期：{{ temp.redeem_start }}起 - {{ temp.redeem_end }}；</div>
      <div>·营业时间：{{ temp.start_time }} - {{ temp.end_time }}；</div>
      <div>·店铺地址：{{ temp.address }}</div>
    </div>

    <div v-show="show" class="fix">
      <div class="cont-tk">
        <img src="@/assets/tk.png" alt class="tk">
        <div class="btn-group">
          <img src="@/assets/btn_cancel.png" class="cancle" @click="show = false">
          <img src="@/assets/btn_used.png" class="uesd" @click="useHandler">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userPrizeUse } from '@/api/utils'
export default {
    props: {
        temp: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            show: false
        }
    },
    methods: {
        useAlertHandler() {
            if (this.temp.is_use === 1) {
                return
            }
            this.show = true
        },
        async useHandler() {
            // 这里执行使用兑奖券操作
            const res = await userPrizeUse({ id: this.temp.id })
            console.log(res)
            this.temp.is_use = 1
            this.show = false
        }
    }
}
</script>

<style lang="less" scoped>
.info {
  width: 84%;
  margin: 0 auto 2%;
  position: relative;
  border-bottom: 1px solid #fff;
  padding: 15px 0;
  .time {
    margin-bottom: 2%;
    color: #fff;
    font-size: 12px;
  }
  .rule {
    margin: 5px 0;
    div {
      padding-top: 5px;
      color: #fff;
      font-size: 12px;
    }
  }
  .bg_ticket {
    .use-bg {
      width: 100%;
      position: relative;
    }
    .cont {
      width: 100%;
      display: flex;
      justify-content: space-between;
      // border: 1px solid #ccc;
      align-items: center;
      position: absolute;
      top: 9vw;
      .rank {
        color: #000;
        font-weight: bold;
        font-size: 17px;
        padding-left: 10px;
      }
      .name {
        font-weight: bold;
        color: #e96d29;
        font-size: 14px;
      }
      .id {
        margin-top: 5px;
        font-size: 12px;
        color: #666666;
      }
    }
    .btn {
      width: 65px;
      height: 100px;
    }
  }

  .fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99;
    .cont-tk {
      position: absolute;
      width: 80%;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      img {
        width: 100%;
      }
      .btn-group {
        width: 100%;
        padding: 10%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        img {
          width: 40%;
          height: 100%;
        }
        .uesd {
          // padding-left: 5%;
        }
      }
    }
  }
}
</style>
